<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card shadow="hover" class="mgb20" style="height: 45%">
                    <el-descriptions title="用户信息" border column="1">
                        <el-descriptions-item label="昵称">{{ user.name }}</el-descriptions-item>
                        <el-descriptions-item label="权限">{{ format_permiss(null, null, user.permission) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="登录IP">{{ user.login_ip }}</el-descriptions-item>
                        <el-descriptions-item label="注册时间">{{ timeToStrTime(user.create_time * 1000) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="登录时间">{{ timeToStrTime(user.login_time * 1000) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="登录地点">{{ user.city_name }}</el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <el-card shadow="hover" class="mgb20" style="height: 55%">
                    <el-form inline="inline">
                        <el-form-item>
                            <h3>服务器信息</h3>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="refresh" @click="refresh_sever_info"></el-button>
                        </el-form-item>
                    </el-form>
                    <el-descriptions border column="1">
                        <el-descriptions-item label="名字">{{ run_info.name }}</el-descriptions-item>
                        <el-descriptions-item label="CPU使用率">{{
                                run_info.cpu.toFixed(2) + "%"
                            }}
                        </el-descriptions-item>

                        <el-descriptions-item label="使用内存">
                            {{ (run_info.use_memory / (1024 * 1024)).toFixed(2) + "MB" }}
                        </el-descriptions-item>
                        <el-descriptions-item label="物理内存">
                            {{ (run_info.max_memory / (1024 * 1024 * 1024)).toFixed(2) + "G" }}
                        </el-descriptions-item>
                        <el-descriptions-item label="http总处理">{{ run_info.web.sum }}</el-descriptions-item>
                        <el-descriptions-item label="Mongo总处理">{{ run_info.mongo.sum }}</el-descriptions-item>
                        <el-descriptions-item label="启动时间">{{
                                new Date(run_info.time).toLocaleString()
                            }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card shadow="hover" style="height: 100%">
                    <h4>操作记录</h4>
                    <el-table :data="tab.list" border style="margin-top: 20px">
                        <el-table-column label="用户" prop="name"></el-table-column>
                        <el-table-column label="方法" prop="method"></el-table-column>
                        <el-table-column label="路径" prop="url" show-overflow-tooltip></el-table-column>
                        <el-table-column label="描述" prop="desc" show-overflow-tooltip></el-table-column>
                        <el-table-column label="时间" prop="time" show-overflow-tooltip
                                         :formatter="format_time"></el-table-column>
                        <el-table-column label="查看">
                            <template #default="scope">
                                <el-button type="primary" @click="look_http(scope.row)">查看</el-button>
                                <el-button type="danger" v-if="user.permission === 100">删除</el-button>
                            </template>
                        </el-table-column>
                        <!--                        <el-table-column label="请求" prop="request" show-overflow-tooltip></el-table-column>-->
                        <!--                        <el-table-column label="返回" prop="response" show-overflow-tooltip></el-table-column>-->
                    </el-table>

                    <div class="pagination">
                        <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page="tab.page.index"
                            :page-size="tab.page.count"
                            :total="tab.page.total"
                            @current-change="handlePageChange"
                        ></el-pagination>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="查看http请求" v-model="view.show">
            <el-descriptions column="1">
                <el-descriptions-item label="请求">
                    <json-viewer :data="view.request" :key="view.index"></json-viewer>
                </el-descriptions-item>
                <el-descriptions-item label="返回">
                    <json-viewer :data="view.response" :key="view.index"></json-viewer>
                </el-descriptions-item>
            </el-descriptions>

        </el-dialog>
    </div>
</template>

<script>

import {format_permiss, format_time} from "../api/format";
import {RequestOptRecord} from "../api/login";
import Avatar from '../views/Avatar.vue';
import axios from "axios";
import service from "../utils/request";
import {httpRequest} from "../utils/httpRequest";
import JsonViewer from "./json_view.vue";


export default {
    name: "welcome",
    components: {
        JsonViewer,
        Avatar
    },
    data() {
        return {
            tab: {
                list: [],
                page: {
                    index: 1,
                    count: 10,
                    total: 0
                },
            },
            index: 1,
            show_view: false,
            run_info: {
                name: "",
                fps: "",
                time: 0,
                cpu: 0,
                use_memory: 0,
                max_memory: 0,
                web: {
                    sum: 0
                },
                mongo: {
                    sum: 0
                }
            },
            user: {
                name: "",
                login_ip: "",
                city_name: "",
                permission: 0,
                login_time: 0,
                create_time: 0,
            },
            view: {
                index: 0,
                show: false,
                request: {},
                response: {}
            },
            format_time: format_time,
            format_permiss: format_permiss
        }
    },
    methods: {
        service,
        timeToStrTime(timestamp) {
            const date = new Date(timestamp);
            return date.toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai', hour12: false});
        },
        look_http(data) {
            this.view.index++
            this.view.request = this.parse_data(data.request)
            this.view.response = this.parse_data(data.response)
            this.view.show = true
        },

        parse_data(data) {
            try {
                return JSON.parse(data)
            } catch (e) {
                const params = new URLSearchParams(data);
                return Object.fromEntries(params.entries());
            }
        },

        handlePageChange(page) {
            this.tab.page.index = page
            this.query_operator_record().then(() => {

            })
        },
        async query_operator_record() {
            const response = await RequestOptRecord(this.tab.page.index)
            const result = response.data
            if (result.code === 0) {
                this.tab.list = result.data.list
                this.tab.page.total = result.data.count
            }
        },
        async refresh_sever_info() {
            const response = await httpRequest.GET("/admin/info")
            if (response.data.code === 0) {
                this.run_info = response.data.data
            }
        }
    },
    async mounted() {
        const user_json = localStorage.getItem("user_info")
        if (user_json && user_json.length > 0) {
            this.user = JSON.parse(user_json)
            try {
                const response = await axios.get(`http://ip-api.com/json/${this.user.login_ip}?lang=zh-CN`)
                this.user.city_name = response.data.city
            } catch (e) {
                this.user.city_name = "未知"
            }
        }
        await this.refresh_sever_info();
        this.query_operator_record().then(() => {

        })
    }
}
</script>

<style>
.preserve-space {
    white-space: pre;
}
</style>

